import React from 'react'
import { View, Text, TouchableOpacity, ViewStyle, StyleSheet, TextStyle } from 'react-native';
import { ShortBar, Division } from 'components'
import { navigate } from 'services/navigation'
import { commonStyle, translateSize } from 'styles'
import { PosAppTrade } from 'api/pos';
import { getAuthorization, operate } from 'services/authorization';

interface IProps {
	data: PosAppTrade;
	onItemPress?: (data: PosAppTrade) => void
}

const TradItem: React.FC<IProps> = props => {
	return <View>
		<TouchableOpacity
			onPress={() => {
				operate()
				props.onItemPress && props.onItemPress(props.data)
			}}>
			<View style={styles.itemContainer}>
				<View style={styles.projectContainer}>
					<ShortBar style={styles.title} title={getAuthorization().project.name} />
					<Text style={commonStyle.titleTag}>{props.data.auartName} </Text>
					{/* <Text style={commonStyle.tag}> 收取POS机手续费 </Text> */}
				</View>
				<Text style={{ ...styles.room, ...commonStyle.roomStyle }}> {props.data.roomName || ''} </Text>
			</View>

		</TouchableOpacity>
		<Division />
	</View>
}

interface TradItemStyle {
	itemContainer: ViewStyle
	projectContainer: ViewStyle
	title: ViewStyle
	room: TextStyle
}

const styles = StyleSheet.create<TradItemStyle>({
	title: {
		width: '50%',
		paddingLeft: translateSize(30),
	},
	itemContainer: {
		height: 'auto',
		paddingBottom: translateSize(20),
		paddingRight: translateSize(43),
		// alignItems: 'center',		
	},
	room: {
		paddingLeft: translateSize(30),
	},
	projectContainer: {
		height: translateSize(71),
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
	}
})

export default TradItem